Veebikomponendi elutsükkel: kohandatud elemendi loomine ja haldamine

Veebikomponendid on võimas veebistandardite kogum, mis võimaldab arendajatel luua korduvkasutatavaid, kapseldatud ja koostalitlusvõimelisi kohandatud HTML-elemente. Nende komponentide elutsükli mõistmine on oluline robustsete ja hooldatavate veebirakenduste ehitamiseks. See põhjalik juhend süveneb veebikomponendi elutsükli erinevatesse etappidesse, pakkudes praktilisi näiteid ja parimaid tavasid.

Mis on veebikomponendid?

Veebikomponendid on tehnoloogiate komplekt, mis laseb teil luua korduvkasutatavaid kohandatud HTML-elemente kapseldatud stiili ja loogikaga. Need koosnevad kolmest peamisest spetsifikatsioonist:

• Kohandatud elemendid: Määratlege oma HTML-elemendid kohandatud funktsionaalsusega.
• Shadow DOM: Kapseldab komponendi sisemise struktuuri, stiili ja käitumise, vältides häireid ümbritsevast dokumendist.
• HTML-mallid: Võimaldab määratleda korduvkasutatavaid HTML-märgistuse tükke.

Need tehnoloogiad võimaldavad arendajatel luua iseseisvaid, korduvkasutatavaid UI-komponente, mida saab hõlpsasti integreerida mis tahes veebirakendusse, sõltumata selle aluseks olevast raamistikust. Kujutage ette kohandatud <data-grid> elemendi ehitamist, mis tegeleb sortimise, filtreerimise ja lehitsemisega, või <country-selector> elementi, mis pakub kasutajasõbralikku liidest riikide valimiseks globaalsest nimekirjast. Veebikomponendid teevad selle võimalikuks.

Veebikomponendi elutsükkel

Veebikomponendi elutsükkel kirjeldab selle olemasolu erinevaid etappe, alates loomisest kuni eemaldamiseni. Nende etappide mõistmine võimaldab teil haakuda konkreetsete sündmustega ja sooritada vajalikke toiminguid komponendi käitumise ja oleku tõhusaks haldamiseks.

Neli peamist elutsükli tagasikutset on:

• connectedCallback
• disconnectedCallback
• attributeChangedCallback
• adoptedCallback

1. connectedCallback

connectedCallback kutsutakse välja siis, kui kohandatud element ühendatakse dokumendi DOM-iga. See juhtub tavaliselt siis, kui element lisatakse dokumendile või kui see liigutatakse ühest dokumendi osast teise. See on ideaalne koht, kus:

• Initsialiseerida komponendi olek.
• Lisada sündmuste kuulajaid.
• Tuua andmeid välisest allikast.
• Renderdada komponendi esialgne kasutajaliides.

Näide:

            class MyComponent extends HTMLElement {
  constructor() {
    super();
    this.shadow = this.attachShadow({ mode: 'open' });
  }

  connectedCallback() {
    this.shadow.innerHTML = `
      <style>
        :host {
          display: block;
          border: 1px solid #ccc;
          padding: 10px;
        }
      </style>
      <p>Tere MyComponent'ist!</p>
    `;

    // Andmete toomise näide (asenda oma tegeliku API otspunktiga)
    fetch('https://api.example.com/data')
      .then(response => response.json())
      .then(data => {
        // Töötle andmeid ja uuenda komponendi kasutajaliidest
        const dataElement = document.createElement('p');
        dataElement.textContent = `Andmed: ${JSON.stringify(data)}`;
        this.shadow.appendChild(dataElement);
      });
  }
}

customElements.define('my-component', MyComponent);

            

              
                Copy
              
            
          

Selles näites lisab connectedCallback komponendile Shadow DOM-i, renderdab esialgse HTML-i ja toob andmeid välisest API-st. Seejärel uuendab see Shadow DOM-i toodud andmetega.

2. disconnectedCallback

disconnectedCallback kutsutakse välja siis, kui kohandatud element eemaldatakse dokumendi DOM-ist. See juhtub tavaliselt siis, kui element eemaldatakse dokumendist või kui see liigutatakse teise dokumenti. See on ideaalne koht, kus:

• Puhastada ressursse.
• Eemaldada sündmuste kuulajaid.
• Tühistada ootel olevaid päringuid.

Näide:

            class MyComponent extends HTMLElement {
  constructor() {
    super();
    this.shadow = this.attachShadow({ mode: 'open' });
    this.eventListener = null; // Salvesta sündmuse kuulaja
  }

  connectedCallback() {
    // ... (eelnev kood) ...

    // Näide: Lisa suuruse muutmise sündmuse kuulaja
    this.eventListener = () => {
      console.log('Komponendi suurust muudeti!');
    };
    window.addEventListener('resize', this.eventListener);
  }

  disconnectedCallback() {
    // Eemalda suuruse muutmise sündmuse kuulaja
    if (this.eventListener) {
      window.removeEventListener('resize', this.eventListener);
      this.eventListener = null;
    }

    console.log('Komponent eemaldatud!');
  }
}

            

              
                Copy
              
            
          

Selles näites eemaldab disconnectedCallback suuruse muutmise sündmuse kuulaja, mis lisati connectedCallback'is, vältides mälulekkeid ja ootamatut käitumist pärast komponendi eemaldamist DOM-ist.

3. attributeChangedCallback

attributeChangedCallback kutsutakse välja siis, kui ühte kohandatud elemendi jälgitavatest atribuutidest lisatakse, eemaldatakse, uuendatakse või asendatakse. Atribuutide jälgimiseks peate määratlema kohandatud elemendi klassis staatilise observedAttributes getteri. See tagasikutse on ülioluline komponendi konfiguratsiooni muudatustele reageerimiseks.

Näide:

            class MyComponent extends HTMLElement {
  constructor() {
    super();
    this.shadow = this.attachShadow({ mode: 'open' });
  }

  static get observedAttributes() {
    return ['message', 'country'];
  }

  attributeChangedCallback(name, oldValue, newValue) {
    console.log(`Atribuut ${name} muutus väärtusest ${oldValue} väärtuseks ${newValue}`);

    if (name === 'message') {
      this.shadow.querySelector('p').textContent = newValue;
    } else if (name === 'country') {
       // Kujutage ette lipupildi toomist valitud riigikoodi alusel
       let flagURL = `https://flagcdn.com/w40/${newValue}.png`;
       let img = this.shadow.querySelector('img');
       if(!img){
          img = document.createElement('img');
          this.shadow.appendChild(img);
       }
       img.src = flagURL;
       img.alt = `Riigi ${newValue} lipp`;
    }
  }

  connectedCallback() {
    this.shadow.innerHTML = `
      <style>
        :host {
          display: block;
          border: 1px solid #ccc;
          padding: 10px;
        }
      </style>
      <p>Tere MyComponent'ist!</p>
      <img style="width:40px;"/>
    `;

    // Määra esialgne sõnum atribuudist, kui see on olemas
    if (this.hasAttribute('message')) {
      this.shadow.querySelector('p').textContent = this.getAttribute('message');
    }
  }
}

customElements.define('my-component', MyComponent);

            

              
                Copy
              
            
          

Selles näites jälgib komponent atribuute message ja country. Kui atribuut message muutub, uuendab attributeChangedCallback Shadow DOM-i sees oleva lõiguelemendi tekstisisu. Kui atribuut country muutub, toob see lipupildi ja uuendab `img` elementi.

Selle komponendi kasutamiseks kirjutaksite järgmise HTML-i:

            <my-component message="Tere maailm!" country="ee"></my-component>
            

              
                Copy
              
            
          

Seejärel saate atribuuti dünaamiliselt muuta JavaScripti abil:

            const myComponent = document.querySelector('my-component');
myComponent.setAttribute('message', 'Uuendatud sõnum!');
myComponent.setAttribute('country', 'us'); //muuda riigi lippu

            

              
                Copy
              
            
          

4. adoptedCallback

adoptedCallback kutsutakse välja siis, kui kohandatud element viiakse uude dokumenti. See juhtub tavaliselt siis, kui element viiakse ühest iframe'ist teise. Seda tagasikutset kasutatakse harvemini kui teisi elutsükli tagasikutseid, kuid see võib olla kasulik:

• Viidete uuendamiseks uuele dokumendile.
• Stiilide kohandamiseks uue dokumendi konteksti põhjal.

Näide:

            class MyComponent extends HTMLElement {
  constructor() {
    super();
    this.shadow = this.attachShadow({ mode: 'open' });
  }

  adoptedCallback(oldDocument, newDocument) {
    console.log('Komponent adopteeriti uude dokumenti!');
    console.log('Vana dokument:', oldDocument);
    console.log('Uus dokument:', newDocument);

    // Uuenda siin kõik dokumendipõhised viited
    // Näiteks kui teil on viide globaalsele muutujale
    // vanas dokumendis, peate võib-olla selle uuendama uue dokumendi globaalsele muutujale.
  }

  connectedCallback() {
    this.shadow.innerHTML = `
      <style>
        :host {
          display: block;
          border: 1px solid #ccc;
          padding: 10px;
        }
      </style>
      <p>Tere MyComponent'ist!</p>
    `;
  }
}

customElements.define('my-component', MyComponent);

            

              
                Copy
              
            
          

adoptedCallback käivitamiseks peate komponendi liigutama ühest dokumendist teise, näiteks lisades selle iframe'i dokumendile.

Veebikomponendi elutsükli haldamise parimad tavad

Siin on mõned parimad tavad, mida veebikomponendi elutsükliga töötades meeles pidada:

• Kasutage Shadow DOM-i: Kapseldage oma komponendi sisemine struktuur, stiil ja käitumine Shadow DOM-i abil, et vältida konflikte ümbritseva dokumendiga.
• Jälgige atribuute: Kasutage observedAttributes getterit ja attributeChangedCallback, et reageerida komponendi atribuutide muudatustele ja uuendada vastavalt kasutajaliidest.
• Puhastage ressursse: disconnectedCallback'is puhastage kindlasti kõik ressursid, mida komponent kasutab, näiteks sündmuste kuulajad, taimerid ja võrgupäringud, et vältida mälulekkeid ja ootamatut käitumist.
• Arvestage ligipääsetavusega: Veenduge, et teie komponendid on puuetega kasutajatele ligipääsetavad, järgides ligipääsetavuse parimaid tavasid, näiteks pakkudes sobivaid ARIA atribuute ja tagades, et komponent on klaviatuuriga navigeeritav.
• Kasutage ehitustööriista: Kaaluge ehitustööriista, näiteks Rollupi või Webpacki, kasutamist oma veebikomponentide komplekteerimiseks ja tootmiseks optimeerimiseks. See võib aidata parandada jõudlust ja vähendada komponentide suurust.
• Põhjalik testimine: Rakendage ühiku- ja integratsiooniteste, et tagada komponendi ootuspärane toimimine erinevates stsenaariumides. Automatiseerige testid, et katta kõik elutsükli meetodid.

Globaalsed kaalutlused veebikomponentide disainimisel

Globaalsele vaatajaskonnale veebikomponente disainides on oluline arvestada järgmisega:

• Lokaliseerimine: Rakendage rahvusvahelistamist (i18n), et toetada mitut keelt ja piirkonda. Kasutage tõlgete haldamiseks ressursifaile või väliseid teeke. Näiteks kuupäevavalija komponent peaks kuvama kuupäevi kasutaja eelistatud vormingus (nt USA-s MM/DD/YYYY, Euroopas DD/MM/YYYY).
• Paremalt vasakule (RTL) tugi: Veenduge, et teie komponendid toetavad RTL-keeli, nagu araabia ja heebrea keel. Kasutage paigutuse peegeldamiseks CSS-i loogilisi omadusi (nt margin-inline-start asemel margin-left).
• Kultuuriline tundlikkus: Olge komponentide disainimisel teadlik kultuurilistest erinevustest. Vältige piltide või sümbolite kasutamist, mis võivad teatud kultuurides olla solvavad või sobimatud.
• Ajavööndid ja valuutad: Kuupäevade, kellaaegade või valuutade kuvamisel kasutage kindlasti kasutaja kohalikku ajavööndit ja valuutat. Kasutage nende väärtuste korrektseks vormindamiseks teeke nagu Intl.
• Ligipääsetavus: Järgige WCAG juhiseid, et tagada teie komponentide ligipääsetavus puuetega kasutajatele üle kogu maailma.

Kokkuvõte

Veebikomponendi elutsükli mõistmine on oluline robustsete, korduvkasutatavate ja hooldatavate veebirakenduste ehitamiseks. Elutsükli tagasikutseid kasutades saate tõhusalt hallata komponendi olekut, reageerida muudatustele ja puhastada ressursse. Parimaid tavasid järgides ja globaalseid tegureid arvestades saate luua veebikomponente, mis on ligipääsetavad ja kasutatavad kasutajatele üle kogu maailma. Veebiarenduse arenedes mängivad veebikomponendid üha olulisemat rolli keerukate ja skaleeritavate veebirakenduste ehitamisel. Võtke need omaks, valdage nende elutsüklit ja avage nende potentsiaal!